import * as THREE from 'three';

let isOpen = true;
/**
 * 精灵创建下雨效果
 */
// 加载雨滴理贴图
const textureTree = new THREE.TextureLoader().load(require('./img/rain.png'));

const group = new THREE.Group();
// 批量创建表示雨滴的精灵模型

function init(scene) {
    for (let i = 0; i < 400; i++) {
        var spriteMaterial = new THREE.SpriteMaterial({
            map: textureTree,//设置精灵纹理贴图
        });
        // 创建精灵模型对象
        var sprite = new THREE.Sprite(spriteMaterial);
        // 控制精灵大小,
        sprite.scale.set(8, 10, 1); //// 只需要设置x、y两个分量就可以
        var k1 = Math.random() - 0.5;
        var k2 = Math.random() - 0.5;
        var k3 = Math.random() - 0.5;
        // 设置精灵模型位置，在整个空间上上随机分布
        sprite.position.set(2000 * k1, 3000 * k3, 2000 * k2);
        group.add(sprite);
    }
    if (isOpen === false) {
        isOpen = true;
        return;
    }
    scene.add(group);
    render()
}

// 渲染函数
function render() {
    // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
    // 每次渲染都会更新雨滴的位置，进而产生动画效果
    group.children.forEach(sprite => {
        if (!isOpen) {
            group.remove(sprite)
        }
        // 雨滴的y坐标每次减1
        sprite.position.y -= 5;
        if (sprite.position.y < -100) {
            // 如果雨滴落到地面，重置y，从新下落
            sprite.position.y = 400;
        }
    });
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

export default {
    init,
    close: () => isOpen = false
}